{% extends "layout.html" %}

{% block title %}详细报表 - 3D定制商品生产平台{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row mb-4">
        <div class="col-12">
            <h1 class="h3 mb-0 text-gray-800">详细报表</h1>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb bg-transparent mb-0">
                    <li class="breadcrumb-item"><a href="/admin">首页</a></li>
                    <li class="breadcrumb-item"><a href="/admin/reports">数据统计报表</a></li>
                    <li class="breadcrumb-item active">详细报表</li>
                </ol>
            </nav>
        </div>
    </div>

    <!-- 报表筛选器 -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card shadow">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">报表筛选</h6>
                </div>
                <div class="card-body">
                    <form method="GET" class="form-inline">
                        <div class="form-group mr-3">
                            <label for="start_date" class="mr-2">开始日期:</label>
                            <input type="date" class="form-control" id="start_date" name="start_date" value="{{ request.args.get('start_date', '') }}">
                        </div>
                        <div class="form-group mr-3">
                            <label for="end_date" class="mr-2">结束日期:</label>
                            <input type="date" class="form-control" id="end_date" name="end_date" value="{{ request.args.get('end_date', '') }}">
                        </div>
                        <div class="form-group mr-3">
                            <label for="report_type" class="mr-2">报表类型:</label>
                            <select class="form-control" id="report_type" name="report_type">
                                <option value="all" {% if request.args.get('report_type') == 'all' %}selected{% endif %}>全部</option>
                                <option value="orders" {% if request.args.get('report_type') == 'orders' %}selected{% endif %}>订单统计</option>
                                <option value="users" {% if request.args.get('report_type') == 'users' %}selected{% endif %}>用户统计</option>
                                <option value="products" {% if request.args.get('report_type') == 'products' %}selected{% endif %}>商品统计</option>
                                <option value="production" {% if request.args.get('report_type') == 'production' %}selected{% endif %}>生产统计</option>
                            </select>
                        </div>
                        <button type="submit" class="btn btn-primary mr-2">筛选</button>
                        <a href="/admin/reports/detailed" class="btn btn-secondary">重置</a>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- 订单统计 -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card shadow">
                <div class="card-header py-3 d-flex justify-content-between align-items-center">
                    <h6 class="m-0 font-weight-bold text-primary">订单统计</h6>
                    <div>
                        <button class="btn btn-outline-primary btn-sm" onclick="exportReport('orders')">导出订单报表</button>
                    </div>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-3 mb-3">
                            <div class="border rounded p-3 text-center bg-light">
                                <h4 class="text-primary">{{ stats.orders.total }}</h4>
                                <p class="text-muted mb-0">总订单数</p>
                            </div>
                        </div>
                        <div class="col-md-3 mb-3">
                            <div class="border rounded p-3 text-center bg-light">
                                <h4 class="text-success">¥{{ "%.2f"|format(stats.orders.total_revenue) }}</h4>
                                <p class="text-muted mb-0">总收入</p>
                            </div>
                        </div>
                        <div class="col-md-3 mb-3">
                            <div class="border rounded p-3 text-center bg-light">
                                <h4 class="text-info">¥{{ "%.2f"|format(stats.orders.avg_revenue) }}</h4>
                                <p class="text-muted mb-0">平均订单金额</p>
                            </div>
                        </div>
                        <div class="col-md-3 mb-3">
                            <div class="border rounded p-3 text-center bg-light">
                                <h4 class="text-warning">{{ "%.1f"|format(stats.orders.completion_rate) }}%</h4>
                                <p class="text-muted mb-0">完成率</p>
                            </div>
                        </div>
                    </div>
                    
                    <div class="table-responsive mt-4">
                        <table class="table table-bordered">
                            <thead>
                                <tr>
                                    <th>状态</th>
                                    <th>订单数</th>
                                    <th>占比</th>
                                    <th>收入</th>
                                    <th>平均金额</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for status in stats.orders.status_breakdown %}
                                <tr>
                                    <td>
                                        <span class="badge badge-{{ status.color }}">{{ status.name }}</span>
                                    </td>
                                    <td>{{ status.count }}</td>
                                    <td>{{ "%.1f"|format(status.percentage) }}%</td>
                                    <td>¥{{ "%.2f"|format(status.revenue) }}</td>
                                    <td>¥{{ "%.2f"|format(status.avg_amount) }}</td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 用户统计 -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card shadow">
                <div class="card-header py-3 d-flex justify-content-between align-items-center">
                    <h6 class="m-0 font-weight-bold text-primary">用户统计</h6>
                    <div>
                        <button class="btn btn-outline-primary btn-sm" onclick="exportReport('users')">导出用户报表</button>
                    </div>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-3 mb-3">
                            <div class="border rounded p-3 text-center bg-light">
                                <h4 class="text-primary">{{ stats.users.total }}</h4>
                                <p class="text-muted mb-0">总用户数</p>
                            </div>
                        </div>
                        <div class="col-md-3 mb-3">
                            <div class="border rounded p-3 text-center bg-light">
                                <h4 class="text-success">{{ stats.users.active }}</h4>
                                <p class="text-muted mb-0">活跃用户</p>
                            </div>
                        </div>
                        <div class="col-md-3 mb-3">
                            <div class="border rounded p-3 text-center bg-light">
                                <h4 class="text-info">{{ "%.1f"|format(stats.users.growth_rate) }}%</h4>
                                <p class="text-muted mb-0">月增长率</p>
                            </div>
                        </div>
                        <div class="col-md-3 mb-3">
                            <div class="border rounded p-3 text-center bg-light">
                                <h4 class="text-warning">{{ stats.users.avg_orders }}</h4>
                                <p class="text-muted mb-0">人均订单数</p>
                            </div>
                        </div>
                    </div>
                    
                    <div class="table-responsive mt-4">
                        <table class="table table-bordered">
                            <thead>
                                <tr>
                                    <th>用户类型</th>
                                    <th>用户数</th>
                                    <th>占比</th>
                                    <th>订单数</th>
                                    <th>平均订单金额</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for user_type in stats.users.type_breakdown %}
                                <tr>
                                    <td>{{ user_type.name }}</td>
                                    <td>{{ user_type.count }}</td>
                                    <td>{{ "%.1f"|format(user_type.percentage) }}%</td>
                                    <td>{{ user_type.orders }}</td>
                                    <td>¥{{ "%.2f"|format(user_type.avg_order_amount) }}</td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 商品统计 -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card shadow">
                <div class="card-header py-3 d-flex justify-content-between align-items-center">
                    <h6 class="m-0 font-weight-bold text-primary">商品统计</h6>
                    <div>
                        <button class="btn btn-outline-primary btn-sm" onclick="exportReport('products')">导出商品报表</button>
                    </div>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-3 mb-3">
                            <div class="border rounded p-3 text-center bg-light">
                                <h4 class="text-primary">{{ stats.products.total }}</h4>
                                <p class="text-muted mb-0">商品总数</p>
                            </div>
                        </div>
                        <div class="col-md-3 mb-3">
                            <div class="border rounded p-3 text-center bg-light">
                                <h4 class="text-success">{{ stats.products.active }}</h4>
                                <p class="text-muted mb-0">在售商品</p>
                            </div>
                        </div>
                        <div class="col-md-3 mb-3">
                            <div class="border rounded p-3 text-center bg-light">
                                <h4 class="text-info">¥{{ "%.2f"|format(stats.products.avg_price) }}</h4>
                                <p class="text-muted mb-0">平均价格</p>
                            </div>
                        </div>
                        <div class="col-md-3 mb-3">
                            <div class="border rounded p-3 text-center bg-light">
                                <h4 class="text-warning">{{ stats.products.total_sales }}</h4>
                                <p class="text-muted mb-0">总销量</p>
                            </div>
                        </div>
                    </div>
                    
                    <div class="table-responsive mt-4">
                        <table class="table table-bordered">
                            <thead>
                                <tr>
                                    <th>商品名称</th>
                                    <th>分类</th>
                                    <th>价格</th>
                                    <th>销量</th>
                                    <th>收入</th>
                                    <th>状态</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for product in stats.products.top_selling %}
                                <tr>
                                    <td>{{ product.name }}</td>
                                    <td>{{ product.category }}</td>
                                    <td>¥{{ "%.2f"|format(product.price) }}</td>
                                    <td>{{ product.sales }}</td>
                                    <td>¥{{ "%.2f"|format(product.revenue) }}</td>
                                    <td>
                                        <span class="badge badge-{{ 'success' if product.is_active else 'secondary' }}">
                                            {{ '在售' if product.is_active else '下架' }}
                                        </span>
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 生产统计 -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card shadow">
                <div class="card-header py-3 d-flex justify-content-between align-items-center">
                    <h6 class="m-0 font-weight-bold text-primary">生产统计</h6>
                    <div>
                        <button class="btn btn-outline-primary btn-sm" onclick="exportReport('production')">导出生产报表</button>
                    </div>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-3 mb-3">
                            <div class="border rounded p-3 text-center bg-light">
                                <h4 class="text-primary">{{ stats.production.total_jobs }}</h4>
                                <p class="text-muted mb-0">总生产任务</p>
                            </div>
                        </div>
                        <div class="col-md-3 mb-3">
                            <div class="border rounded p-3 text-center bg-light">
                                <h4 class="text-success">{{ stats.production.completed_jobs }}</h4>
                                <p class="text-muted mb-0">已完成任务</p>
                            </div>
                        </div>
                        <div class="col-md-3 mb-3">
                            <div class="border rounded p-3 text-center bg-light">
                                <h4 class="text-info">{{ "%.1f"|format(stats.production.success_rate) }}%</h4>
                                <p class="text-muted mb-0">成功率</p>
                            </div>
                        </div>
                        <div class="col-md-3 mb-3">
                            <div class="border rounded p-3 text-center bg-light">
                                <h4 class="text-warning">{{ "%.1f"|format(stats.production.avg_time) }}小时</h4>
                                <p class="text-muted mb-0">平均处理时间</p>
                            </div>
                        </div>
                    </div>
                    
                    <div class="table-responsive mt-4">
                        <table class="table table-bordered">
                            <thead>
                                <tr>
                                    <th>状态</th>
                                    <th>任务数</th>
                                    <th>占比</th>
                                    <th>平均处理时间</th>
                                    <th>说明</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for status in stats.production.status_breakdown %}
                                <tr>
                                    <td>
                                        <span class="badge badge-{{ status.color }}">{{ status.name }}</span>
                                    </td>
                                    <td>{{ status.count }}</td>
                                    <td>{{ "%.1f"|format(status.percentage) }}%</td>
                                    <td>{{ "%.1f"|format(status.avg_time) }}小时</td>
                                    <td>{{ status.description }}</td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    function exportReport(type) {
        const params = new URLSearchParams(window.location.search);
        params.set('export', type);
        
        fetch(`/admin/export?${params.toString()}`, {
            method: 'GET',
            headers: {
                'Accept': 'application/json'
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.download_url) {
                window.open(data.download_url, '_blank');
            } else {
                alert('导出失败: ' + data.message);
            }
        })
        .catch(error => {
            console.error('导出失败:', error);
            alert('导出失败，请重试');
        });
    }
</script>
{% endblock %}